<template>
  <div class="index">
    <header class="mui-bar mui-bar-nav my-header">
      <h1 class="mui-title">乐淘云购</h1>
      <a class="mui-icon mui-icon-search mui-pull-right"></a>
    </header>
    <nav class="mui-bar mui-bar-tab my-footer">
      <a class="mui-tab-item mui-active" href="index.html">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </a>
      <a class="mui-tab-item" href="category.html">
        <span class="mui-icon mui-icon-bars"></span>
        <span class="mui-tab-label">分类目录</span>
      </a>
      <a class="mui-tab-item" href="cart.html">
        <span class="mui-icon fa fa-shopping-cart"></span>
        <span class="mui-tab-label">购物车</span>
      </a>
      <a class="mui-tab-item" href="user.html">
        <span class="mui-icon mui-icon-person"></span>
        <span class="mui-tab-label">会员中心</span>
      </a>
    </nav>
    <div class="mui-content">
        <!-- 轮播图 -->
			<div class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../images/banner6.png" alt="">
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/banner1.png" />
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/banner2.png" />
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/banner3.png" />
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/banner4.png" />
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/banner5.png" />
						</a>
					</div>
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/banner6.png" />
						</a>
					</div>
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../images/banner1.png" alt="">
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
			<!-- /轮播图 -->
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";

export default {
  name: "home",
  components: {}
};
</script>

<style lang="less" scoped>
.my-header {
  background: #006699;
}
.my-header h1 {
    color: #FFF;
}
.my-header .mui-icon-search {
    color: #FFF;
}
</style>
